<script setup>
  import {computed} from "vue";

  const props = defineProps({
    houseData: {
      type: Object,
      default: () => ({})
    }
  })

  const imgBack = computed(() => `url(${props.houseData.image.url})`)
  const formatPrice = money => '￥' + money
  const colorBack = computed(() =>
      `linear-gradient(to right, ${gradient.value.startColor}, #${gradient.value.endColor})`)

  //徽标字体颜色
  const badgeColor = computed(() => {
    const cl = props.houseData.priceTipBadge?.color
    return cl ?? '#ffffff'
  })
  //徽标背景颜色
  const gradient = computed(() => {
    const gd = props.houseData.priceTipBadge?.gradient
    return gd ?? {startColor: '#FF6666', endColor: 'FF9F9F'}
  })
  //徽标文字
  const badgeText = computed(() => {
    const te = props.houseData.priceTipBadge?.text
    return te ?? `已减${props.houseData.productPrice - props.houseData.finalPrice}`
  })
</script>

<template>
  <div class="homeResourcesItemHalf homeItem">
    <div class="top" :style="{backgroundImage:imgBack}"></div>
    <div class="bottom">
      <div class="location">
        <img src="@/assets/img/home/location.png" alt="地址">
        <div class="text">{{ houseData.location }}</div>
      </div>
      <div class="name">{{ houseData.houseName }}</div>
      <div class="summary">{{ houseData.summaryText }}</div>
      <div class="price">
        <div class="finalPrice">{{ formatPrice(houseData.finalPrice) }}</div>
        <div class="productPrice">&#165;{{ houseData.productPrice }}</div>
        <div class="priceTipBadge" :style="{backgroundImage:colorBack,color:badgeColor}">
          {{ badgeText }}
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="less" scoped>
  .homeResourcesItemHalf {
    .top {
      height: 50%;
      background-size: cover;
    }

    .bottom {
      box-sizing: border-box;
      height: 50%;
      padding: 8px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      position: relative;

      &:after {
        position: absolute;
        content: '';
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background: var(--primary-color);
        opacity: .08;
      }

      .location {
        display: flex;
        font-size: 12px;

        img {
          width: 12px;
          height: 12px;
        }
      }

      .name {
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2; // 控制多行的行数
        -webkit-box-orient: vertical;
      }

      .summary {
        font-size: 12px;
      }

      .price {
        display: flex;
        align-items: center;

        .finalPrice {
          color: var(--primary-color);
        }

        .productPrice {
          font-size: 12px;
          color: var(--auxiliary-text-color);
          text-decoration: line-through;
          margin: 0 5px -2px;
        }

        .priceTipBadge {
          font-size: 12px;
          line-height: 14px;
          padding: 1px 6px;
          text-align: center;
          border-radius: var(--options-border-radius);
        }
      }
    }
  }
</style>